<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 表单验证
       1:在el-form上加一个rules属性 model属性也一定要加
       2:在需要验证的项上加一个prop绑定  prop="它需要验证项的值后面的字段名"
         rules对应的值是一个对象:{
              prop的值:[
              {required:true(必填),message:"不停的时候的错误信息",trigger:"blur/change"},
              {min:最小长度(字符个数),max:最大长度,message:"不在该长度的错误信息",trigger:"blur/change"}
              ]
         }
       全局表单验证
          1:在el-form上加了一个ref属性
          2:调用el-form组件上一个validate((result)=>{//result就是验证结果,true:验证通过,false:验证失败}) 
          this.$refs.ref值.validate((result)=>{//result就是验证结果,true:验证通过,false:验证失败})
     
    消息提示
    this.$message({
        message:提示内容,
        type:类型(样式)
    })
    this.$message.success("成功内容")
    this.$message.类型的值(info/success/error/warning).("错误信息")

    
    -->
    <div id="app">
      <el-form :model="ruleForm" ref="form" label-width="100px" :rules="rules">
        <el-form-item label="活动名称" prop="xxx">
          <el-input v-model="ruleForm.xxx"></el-input>
        </el-form-item>
        <el-form-item prop="tel" label="手机号">
          <el-input v-model="ruleForm.tel"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确定</el-button>
        </el-form-item>
      </el-form>
    </div>

    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./element.css" />
    <script src="./ele.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          ruleForm: {
            xxx: "",
            tel: "",
          },
          rules: {
            xxx: [
              { required: true, message: "请输入活动名称", trigger: "blur" },
              {
                min: 3,
                max: 5,
                message: "长度在 3 到 5 个字符",
                trigger: "blur",
              },
            ],
            tel: [
              { required: true, message: "请输入手机号", trigger: "change" },
              {
                min: 11,
                max: 11,
                message: "请输入正确手机号",
                trigger: "change",
              },
            ],
          },
        },
        methods: {
          submit() {
            // 访问el-form的this
            this.$refs.form.validate((result) => {
              // 验证通过result就是true,不通过就是false
              if (result) {
                this.$message.success("验证成功");
              } else {
                this.$message.error("验证失败");
              }
            });
          },
        },
      });
    </script>
  </body>
</html>
